<template>
    <div>
        <!-- 面包屑导航 -->
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt="" />
            </div>
            <crumbs basetitle="财务" title="收款账户明细"></crumbs>
        </div>
        <div class="tabcontentbox">
            <div class="formbox">
                <div class="top">
                    <div class="toptext">筛选</div>
                    <div class="flexcenterbox">
                        <div class="clear" @click="clearform">
                            <img src="../../assets/image/容器.png" alt="">
                            <span>清除</span>
                        </div>
                        <div class="clear" @click="exportlist">
                            <img src="../../assets/image/Share.png" alt="">
                            <span>导出</span>
                        </div>
                    </div>
                </div>
                <div class="formcontent">
                    <div class="formitem">
                        <div class="lable">公司名称：</div>
                        <el-select clearable style="margin-right: 52px;width:265px" v-model="companyid" filterable remote reserve-keyword
                            @change="getzhmxlist" placeholder="请输入公司名称" :remote-method="remoteMethod"
                            :loading="loading">
                            <el-option v-for="item in companylist" :key="item.id" :label="item.companyName"
                            :value="item.id" />
                        </el-select>
                    </div>
                    <div class="formitem">
                        <div class="lable">产品筛选：</div>
                        <el-radio-group v-model="productType" @change="getzhmxlist">
                            <el-radio label="" size="large">全部</el-radio>
                            <el-radio label="0" size="large">子弹发薪</el-radio>
                            <el-radio label="3" size="large">长期保</el-radio>
                            <el-radio label="2" size="large">日日保</el-radio>
                            <el-radio label="1" size="large">电子签</el-radio>
                            <el-radio label="6" size="large">群发消息</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="formitem">
                        <div class="lable">类型：</div>
                        <el-radio-group v-model="fntype" @change="getzhmxlist">
                            <el-radio label="" size="large">全部</el-radio>
                            <el-radio label="1" size="large">充值</el-radio>
                            <el-radio label="3" size="large">提现</el-radio>
                            <el-radio label="5" size="large">余额转入</el-radio>
                            <el-radio label="4" size="large">余额转出</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="formitem">
                        <div class="lable">审核状态：</div>
                        <el-radio-group v-model="status" @change="getzhmxlist">
                            <el-radio label="" size="large">全部</el-radio>
                            <el-radio label="0" size="large">待审核</el-radio>
                            <el-radio label="1" size="large">已通过</el-radio>
                            <el-radio label="2" size="large">已驳回</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
        </div>
        <div class="tabcontentbox" style="margin-top: -32px;">
            <div class="accounttable">
                <div class="tableborder">
                    <el-table :data="financeReceiptdata" style="width: 100%; margin-top: 0" :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536',
                    }">
                        <el-table-column prop="companyName" label="客户名" />
                        <el-table-column prop="createTime" label="产品">
                            <template #default="scope">
                                <div v-show="scope.row.productType === 0">子弹发薪</div>
                                <div v-show="scope.row.productType === 1">电子签</div>
                                <div v-show="scope.row.productType === 2">日日保</div>
                                <div v-show="scope.row.productType === 3">长期保</div>
                                <div v-show="scope.row.productType === 6">群发消息</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态">
                            <template #default="scope">
                                <div v-show="scope.row.status === 0" class="">未审核</div>
                                <div v-show="scope.row.status === 1" class="gray">已审核</div>
                                <div v-show="scope.row.status === 5" class="yellow">已转入</div>
                                <div v-show="scope.row.status === 4" class="green">已转出</div>
                                <div v-show="scope.row.status === 2" class="red">已驳回</div>
                                <div v-show="scope.row.status === 3" class="blue">已提现</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="operateAmount" label="操作金额" />
                        <el-table-column prop="createTime" label="操作时间" />
                        <el-table-column prop="payMode" label="操作方式">
                            <template #default="scope">
                                <div v-show="scope.row.payMode === 1">公对公</div>
                                <div v-show="scope.row.payMode === 2">微信</div>
                                <div v-show="scope.row.payMode === 3">私对公</div>
                                <div v-show="scope.row.payMode === 4">赠送</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注">
                            <template #default="scope">
                                <el-tooltip class="box-item" effect="dark" :content="scope.row.remark"
                                    placement="bottom-start">
                                    <div>{{ scope.row.remark }}</div>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column prop="area" label="类型">
                            <template #default="scope">
                                <div v-show="scope.row.type === 1">充值</div>
                                <div v-show="scope.row.type === 4">余额转出</div>
                                <div v-show="scope.row.type === 3">提现</div>
                                <div v-show="scope.row.type === 5">转入</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="充值凭证">
                            <template #default="scope">
                                <span v-if="scope.row.voucherUrl !== '' || scope.row.voucherUrl !== null"
                                    class="blue pointer" @click="checkczpz(scope.row.voucherUrl)">点击查看</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="bankName" label="收款账户" />
                        <el-table-column prop="channelName" label="渠道信息" />
                    </el-table>
                </div>
                <div class="paginationborder">
                    <pagination :total="financeReceipttotal" :currentPage="financeReceiptpagenum"
                        :pageSize="financeReceiptpagesize" @SizeChange="changefinanceReceiptpagesize"
                        @CurrentChange="changefinanceReceiptpagenum"></pagination>
                </div>
            </div>
        </div>
        <!-- 产看凭证弹出框 -->
        <el-dialog v-model="dialogczpzVisible" title="充值凭证查看" :width="isMobile ? '580' : '30%'">
            <div style="text-align: center">
                <img crossorigin="anonymous" style="width: 100%" :src="checkczpzimg" alt="" />
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted, onActivated } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { cexportaccountdetailsapi, cgetzhmxlistapi, getcompanyapi } from '../../api/api'
import baseurl from '../../api/env'
const router = useRouter()
const route = useRoute()
const isMobile = ref((window as any).isMobile)

// onMounted(() => {
//     getzhmxlist()
// })
onActivated(() => {
    getzhmxlist()
})
const exportlist = () => {
    cexportaccountdetailsapi({
    companyId: companyid.value,
    productType: productType.value,
    type: fntype.value,
    payMode: '',
    startTime: '',
    endTime: '',
    status: status.value
  }).then((res: any) => {
    console.log(res)
    window.location.href = baseurl + '/common/download?delete=true&fileName=' + res
  })
}
const getzhmxlist = async () => {
    const res: any = await cgetzhmxlistapi({
        companyId: companyid.value?companyid.value:'',
        productType: productType.value,
        type: fntype.value,
        position: 1,
        status: status.value,
        payMode: '',
        pageSize: financeReceiptpagesize.value,
        pageNum: financeReceiptpagenum.value
    })
    console.log(res, '收款账户明细数据')
    financeReceipttotal.value = res.totalCount
    financeReceiptdata.value = res.list
}
const checkczpzimg = ref('')
const checkczpz = (url: any) => {
    checkczpzimg.value = url
    dialogczpzVisible.value = true
}
const dialogczpzVisible = ref(false)
// 获取公司列表
const getcompany = async (val:any) => {
    const res: any = await getcompanyapi(val)
    console.log(res, '获取公司列表')
    companylist.value = res
    loading.value = false
}
const remoteMethod = (query: string) => {
    if (query) {
        loading.value = true
        getcompany(query)
    } else {
        companylist.value = []
    }
}
const loading = ref(false)
const companyid = ref<any>('')
const productType = ref('')
const fntype = ref('')
const status = ref('')
const companylist = ref<any>([])
const clearform = () => {
    companyid.value = ''
    productType.value = ''
    fntype.value = ''
    status.value = ''
    getzhmxlist()
}

const financeReceiptpagesize = ref(10)
const financeReceiptpagenum = ref(1)
const financeReceipttotal = ref(0)
const financeReceiptdata = ref<any>([])
const changefinanceReceiptpagesize = (val: any) => {
    financeReceiptpagesize.value = val
    financeReceiptpagenum.value = 1
    getzhmxlist()
}
const changefinanceReceiptpagenum = (val: any) => {
    financeReceiptpagenum.value = val
    getzhmxlist()
}
const back = () => {
    window.history.back()
}
</script>

<style lang="scss" scoped>
.formbox {
    background-color: #ffffff;
    border-top-right-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 8px;

    .formcontent {
        padding: 0 24px 16px;
        width: 100%;
        box-sizing: border-box;

        .formitem {
            margin-top: 16px;
            margin-right: 50px;
            display: flex;
            align-items: center;

            .formitemflexone {
                display: flex;
                align-items: center;
                flex: 1;
            }

            .lable {
                min-width: 70px;
                font-size: 14px;
                color: #202536;
                margin-right: 8px;
                text-align: right;
            }
        }
    }

    .top {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 16px 8px;
        align-items: center;
        border-bottom: 1px solid #F4F4F7;

        .toptext {
            color: #3D3D3D;
            font-size: 14px;
        }

        .utils {
            display: flex;
            align-items: center;
        }

        .clear {
            cursor: pointer;
            margin-right: 20px;
            margin-left: 24px;
            color: #9497B1;
            font-size: 14px;

            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
                margin-bottom: -3px;
            }
        }
    }
}

.tabcontentbox {
    padding: 16px;
}

.accounttable {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px;
    margin-top: 16px;
}

.tableborder {
    border: 1px solid #EAEAEF;
    border-bottom: none !important;
}

.gray {
    color: #9497B1
}

.yellow {
    color: #FFA814;
}

.green {
    color: #3DB86D;
}

.red {
    color: #E05F42;
}

.blue {
    color: #3E5FF5
}
</style>